<ion-header>
    <ion-toolbar slots="end" class="app-toolbar">
        <ion-title>{{'header.appName' | translate}}</ion-title>
        <ion-fab vertical="center" horizontal="end" edge>
            <ion-grid>
                <ion-row>
                    <!-- 添加一本书 -->
                    <ion-col>
                        <ion-fab-button color="light" (click)="openAddBookDialog()" matTooltip="{{'header.tooltip.addBook' | translate}}" >
                            <ion-avatar>
                                <ion-icon name="add-outline" style="position: absolute; right: 5px; bottom: 10px;"></ion-icon>
                                <img src="assets/images/closed-book-clipart-12-512x512.png" />
                            </ion-avatar>
                        </ion-fab-button>
                    </ion-col>

                    <!-- 云上书籍 -->
                    <ion-col>
                        <ion-fab-button color="light" (click)="openSearchPage()" matTooltip="{{'header.tooltip.openSearchPage' | translate}}" >
                            <ion-avatar id="avatar-cloud-search">
                                <ion-icon name="search-outline" style="position: absolute; right: 5px; bottom: 10px;"></ion-icon>
                                <img src="assets/images/books-cloud.png" />
                            </ion-avatar>
                        </ion-fab-button>
                    </ion-col>

                    <!-- 正在看的书, 打开次数大于 0 的书 -->
                    <ion-col>
                        <ion-badge color="success" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
                            {{currentlyReading}}
                        </ion-badge>
                        <ion-fab-button color="light" (click)="displayBookListCurrentlyReading()" 
                                        matTooltip="{{'header.tooltip.bookList.currentlyReading' | translate}}">
                            <ion-avatar id="avatar-currently-reading">
                                <img src="assets/images/currently-reading-books.png" />
                            </ion-avatar>
                        </ion-fab-button>
                    </ion-col>                   

                    <!-- 书架上的书, 打开 0 次的书 -->
                    <ion-col>
                        <ion-badge color="success" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
                            {{onShelf}}
                        </ion-badge>
                        <ion-fab-button color="light" (click)="displayBookListOnShelf()" 
                                        matTooltip="{{'header.tooltip.bookList.onShelf' | translate}}">
                            <ion-avatar id="avatar-on-shelf">
                                <img src="assets/images/bookshelf-512.png" />
                            </ion-avatar>
                        </ion-fab-button>
                    </ion-col>

                    <!-- 准备删除的书 -->
                    <ion-col>
                        <ion-badge color="warning" style="position: absolute; right: 0px; top: 0px; overflow: visible!important;">
                            {{recycled}}
                        </ion-badge>

                        <ion-fab-button color="light" (click)="displayBookListRecycled()" 
                                        matTooltip="{{'header.tooltip.bookList.recycled' | translate}}">
                            <ion-avatar id="avatar-recycled">
                                <img src="assets/images/trash_full_512x512.png" />
                            </ion-avatar>
                        </ion-fab-button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-fab>
    </ion-toolbar>
    <ion-toolbar class="search-toolbar" *ngIf="search">
        <form>
            <div fxLayout="row" 
                 fxLayoutAlign="center center" 
                 slot="fixed"
                 fxLayoutGap="10px"> 
                <mat-form-field class="search-input-form-field" fxFlex="25">
                    <mat-label>{{'search.keywords' | translate}}</mat-label>
                    <input type="text" matInput [formControl]="keywordsFormControl" 
                           [(ngModel)]="keywords"
                           [errorStateMatcher]="matcher" />
                    <button mat-button 
                            matTooltip="{{'search.tooltip.clearKeywords' | translate}}"
                            *ngIf="keywords" matSuffix mat-icon-button aria-label="Clear" (click)="clearKeywords()">
                        <ion-icon class="remove-search-keywords" name="close-outline"></ion-icon>
                    </button>
                    <mat-hint>{{'search.hint' | translate}}</mat-hint>
                    <mat-error *ngIf="keywordsFormControl.hasError('required')">
                        {{'search.keywords' | translate}}<strong>{{'search.required' | translate}}</strong>
                    </mat-error>
                </mat-form-field>

                <mat-radio-group aria-label="Select a platform" 
                                 fxLayout="row" 
                                 fxLayoutAlign="space-evenly center" 
                                 [(ngModel)]="platformSelected" fxLayoutGap="10px">
                    <mat-radio-button *ngFor="let platform of platforms" [value]="platform.name">
                        <mat-chip>
                            <ion-icon [src]="platform.icon"></ion-icon> {{platform.name}}
                        </mat-chip>
                    </mat-radio-button>
                </mat-radio-group>

                <button mat-stroked-button color="primary" 
                                           (click)="cloudSearch(1)"
                                           [disabled]="!keywordsFormControl.valid">
                    <ion-text color="light"><ion-icon name="search-outline"></ion-icon>{{'search.searchSubmit' | translate}}</ion-text>
                </button>
            </div>
        </form>
    </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true"
    fxLayout="row"
    fxLayoutAlign="center start"
    (ionScroll)="onScroll($event)" 
    style="padding: 10px;">
    <!-- 已下载/保存书籍列表 -->
    <app-book-list *ngIf="!search"
        fxLayout="row wrap" 
        fxLayoutAlign="start start"
        fxFill
        fxLayoutGap="5px"
        [sortBy]="sortBy" 
        [_bookList]="bookList" 
        [beenOpened]="beenOpened" 
        [displayRecycled]="displayRecycled">
    </app-book-list>
    <!-- 搜索到的书籍列表 -->
    <app-books-cloud-search *ngIf="search" 
        fxLayout="column"
        fxLayoutAlign="start end"
        fxFlex="65"
        [bookList]="bookListCloud" 
        [keywords]="keywords"
        [searching]="searching">
    </app-books-cloud-search>
    <!--最近搜索项-->
    <mat-tab-group mat-align-tabs="start" *ngIf="search" class="right-side-bar" slot="fixed">
        <mat-tab label="{{'search.histories' | translate}}"
                 fxLayout="column" fxLayoutAlign="space-between start">
                 <mat-card matButton (click)="historySearch(history.keywords, history.platform)"
                           class="mat-tab-items"
                           *ngFor="let history of searchHistory">
                     <mat-card-title>“{{history.keywords}}”</mat-card-title>
                     <mat-card-subtitle>@{{history.platform}} - <i>{{history.date | readableDate | async}}</i></mat-card-subtitle>
                 </mat-card>
                 <mat-paginator [length]="_searchHistory.length"
                               class="mat-tab-items"
                               [pageSize]="5"
                               [pageSizeOptions]="[5]"
                               (page)="pageEvent = $event">
                 </mat-paginator>
        </mat-tab>
    </mat-tab-group>
</ion-content>
